<template>
  <div class="dialog__container">
    <el-dialog
      v-model="dialogVisible"
      title="弹窗编辑"
      draggable
      width="50%"
      :before-close="beforeClose"
    >
      <div class="dialog__body__container"></div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">
            关闭
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="XXXDialog">
defineOptions({
  name: "XXXDialog",
  inheritAttrs: false,
});
const dialogVisible = ref<boolean>(false);
// 打开弹窗逻辑
const handleOpen = (data: any) => {
  dialogVisible.value = true;
};
defineExpose({
  handleOpen,
});
// 关闭函数
const beforeClose = (done: any) => {
  // 处理关闭逻辑
  if (typeof done === "function") {
    done();
  } else {
    dialogVisible.value = false;
  }
};
</script>

<style lang="scss" scoped>
.dialog__container {
  .dialog__body__container {
    box-sizing: border-box;
    padding-right: 15px;
    max-height: 70vh;
    overflow-y: auto;
  }
}
</style>
